Skip to content

🎨 [Frontend] Enh: Better fit loading page #7866

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 7 commits into from
Jun 10, 2025
Merged

🎨 [Frontend] Enh: Better fit loading page #7866

merged 7 commits into from
Jun 10, 2025

Conversation

@odeimaiz
Copy link
Member

@odeimaiz odeimaiz commented Jun 10, 2025 •
edited
Loading

What do these changes do?

In small screens the loading page might get cropped, this PR changes its layout to improve the fitting.

Before:
image

After:
image

Related issue/s

How to test

Dev-ops

@odeimaiz odeimaiz self-assigned this Jun 10, 2025
@odeimaiz odeimaiz added this to the Bazinga! milestone Jun 10, 2025
@odeimaiz odeimaiz added t:enhancement Improvement or request on an existing feature a:frontend issue affecting the front-end (area group) labels Jun 10, 2025
@odeimaiz odeimaiz marked this pull request as ready for review June 10, 2025 14:25
Copilot AI reviewed Jun 10, 2025
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR refactors the loading page layout for better small‐screen fitting and constrains the progress sequence width.

  • Replaced the grid layout in Loading.js with a vertical box (VBox) and updated widget insertion.
  • Added flexible spacers and switched toolbar visibility to “excluded” state.
  • Set a 400px maxWidth on the main loading page in NodeProgressSequence.js.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.

File Description
services/static-webserver/client/source/class/osparc/ui/message/Loading.js Switched from Grid to VBox layout and updated _addAt calls
services/static-webserver/client/source/class/osparc/data/model/NodeProgressSequence.js Added maxWidth: 400 to main loading page composite

@odeimaiz odeimaiz added the 🤖-automerge marks PR as ready to be merged for Mergify label Jun 10, 2025
@odeimaiz
Copy link
Member Author

odeimaiz commented Jun 10, 2025

@Mergifyio queue

@mergify
Copy link
Contributor

mergify bot commented Jun 10, 2025 •
edited
Loading

queue

🟠 Waiting for conditions to match

  • any of: [🔀 queue conditions]
    • all of: [📌 queue conditions of queue default]
      • label=🤖-automerge
      • #approved-reviews-by >= 2 [🛡 GitHub branch protection]
      • #approved-reviews-by>=2
      • #changes-requested-reviews-by = 0 [🛡 GitHub branch protection]
      • #changes-requested-reviews-by=0
      • #review-threads-unresolved = 0 [🛡 GitHub branch protection]
      • #review-threads-unresolved=0
      • -conflict
      • -draft
      • base=master
      • branch-protection-review-decision = APPROVED [🛡 GitHub branch protection]
      • label!=🤖-do-not-merge
      • any of: [🛡 GitHub branch protection]
        • check-skipped = deploy to dockerhub
        • check-neutral = deploy to dockerhub
        • check-success = deploy to dockerhub
      • any of: [🛡 GitHub branch protection]
        • check-success = system-tests
        • check-neutral = system-tests
        • check-skipped = system-tests
      • any of: [🛡 GitHub branch protection]
        • check-success = unit-tests
        • check-neutral = unit-tests
        • check-skipped = unit-tests
      • any of: [🛡 GitHub branch protection]
        • check-success = check OAS' are up to date
        • check-neutral = check OAS' are up to date
        • check-skipped = check OAS' are up to date
      • any of: [🛡 GitHub branch protection]
        • check-success = integration-tests
        • check-neutral = integration-tests
        • check-skipped = integration-tests
      • any of: [🛡 GitHub branch protection]
        • check-success = build-test-images (frontend) / build-test-images
        • check-neutral = build-test-images (frontend) / build-test-images
        • check-skipped = build-test-images (frontend) / build-test-images
  • -closed [📌 queue requirement]
  • -conflict [📌 queue requirement]
  • -draft [📌 queue requirement]
  • any of: [📌 queue -> configuration change requirements]
    • -mergify-configuration-changed
    • check-success = Configuration changed

@odeimaiz odeimaiz added 🤖-automerge marks PR as ready to be merged for Mergify and removed 🤖-automerge marks PR as ready to be merged for Mergify labels Jun 10, 2025
@odeimaiz
Copy link
Member Author

odeimaiz commented Jun 10, 2025

@Mergifyio queue

@mergify
Copy link
Contributor

mergify bot commented Jun 10, 2025 •
edited
Loading

queue

🛑 The pull request has been removed from the queue default

The following conditions don't match anymore:

  • any of: [🔀 queue conditions]
    • all of: [📌 queue conditions of queue default]
      • label=🤖-automerge
      • any of: [🛡 GitHub branch protection]
        • check-neutral = deploy to dockerhub
        • check-skipped = deploy to dockerhub
        • check-success = deploy to dockerhub
      • any of: [🛡 GitHub branch protection]
        • check-neutral = system-tests
        • check-skipped = system-tests
        • check-success = system-tests
      • any of: [🛡 GitHub branch protection]
        • check-neutral = integration-tests
        • check-skipped = integration-tests
        • check-success = integration-tests

@sonarqubecloud
Copy link

sonarqubecloud bot commented Jun 10, 2025

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@matusdrobuliak66 matusdrobuliak66 removed the 🤖-automerge marks PR as ready to be merged for Mergify label Jun 10, 2025
@mergify
Copy link
Contributor

mergify bot commented Jun 10, 2025

This pull request has been removed from the queue for the following reason: pull request dequeued.

Pull request #7866 has been dequeued. The pull request rule doesn't match anymore.

You should look at the reason for the failure and decide if the pull request needs to be fixed or if you want to requeue it.
If you do update this pull request, it will automatically be requeued once the queue conditions match again.
If you think this was a flaky issue instead, you can requeue the pull request, without updating it, by posting a @mergifyio requeue comment.

@matusdrobuliak66
Copy link
Collaborator

matusdrobuliak66 commented Jun 10, 2025

@Mergifyio queue

@mergify
Copy link
Contributor

mergify bot commented Jun 10, 2025 •
edited
Loading

queue

🟠 Waiting for conditions to match

  • -closed [📌 queue requirement]
  • any of: [🔀 queue conditions]
    • all of: [📌 queue conditions of queue default]
      • label=🤖-automerge
      • #approved-reviews-by >= 2 [🛡 GitHub branch protection]
      • #approved-reviews-by>=2
      • #changes-requested-reviews-by = 0 [🛡 GitHub branch protection]
      • #changes-requested-reviews-by=0
      • #review-threads-unresolved = 0 [🛡 GitHub branch protection]
      • #review-threads-unresolved=0
      • -conflict
      • -draft
      • base=master
      • branch-protection-review-decision = APPROVED [🛡 GitHub branch protection]
      • label!=🤖-do-not-merge
      • any of: [🛡 GitHub branch protection]
        • check-skipped = deploy to dockerhub
        • check-neutral = deploy to dockerhub
        • check-success = deploy to dockerhub
      • any of: [🛡 GitHub branch protection]
        • check-success = system-tests
        • check-neutral = system-tests
        • check-skipped = system-tests
      • any of: [🛡 GitHub branch protection]
        • check-success = unit-tests
        • check-neutral = unit-tests
        • check-skipped = unit-tests
      • any of: [🛡 GitHub branch protection]
        • check-success = check OAS' are up to date
        • check-neutral = check OAS' are up to date
        • check-skipped = check OAS' are up to date
      • any of: [🛡 GitHub branch protection]
        • check-success = integration-tests
        • check-neutral = integration-tests
        • check-skipped = integration-tests
      • any of: [🛡 GitHub branch protection]
        • check-success = build-test-images (frontend) / build-test-images
        • check-neutral = build-test-images (frontend) / build-test-images
        • check-skipped = build-test-images (frontend) / build-test-images
  • -conflict [📌 queue requirement]
  • -draft [📌 queue requirement]
  • any of: [📌 queue -> configuration change requirements]
    • -mergify-configuration-changed
    • check-success = Configuration changed

@odeimaiz odeimaiz merged commit 912ecb3 into ITISFoundation:master Jun 10, 2025
108 of 111 checks passed
This was referenced Jun 17, 2025
Closed
Closed
@matusdrobuliak66 matusdrobuliak66 mentioned this pull request Aug 5, 2025
Closed
88 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@giancarloromeo giancarloromeo giancarloromeo approved these changes

@sanderegg sanderegg sanderegg approved these changes

@matusdrobuliak66 matusdrobuliak66 matusdrobuliak66 approved these changes

@GitHK GitHK Awaiting requested review from GitHK

@pcrespov pcrespov Awaiting requested review from pcrespov

Assignees

@odeimaiz odeimaiz

Labels

a:frontend issue affecting the front-end (area group) t:enhancement Improvement or request on an existing feature

Projects

None yet

Milestone

Bazinga!

Development

Successfully merging this pull request may close these issues.

4 participants

@odeimaiz @matusdrobuliak66 @giancarloromeo @sanderegg